<template>
	<!-- 在线客服 -->
	<view class="custmer">
		<!-- #ifdef MP -->
		<view class="customerService" :class="positions?'':'on'" :style="'top:'+topConfig" @touchmove.stop.prevent="setTouchMove" >
			<view class="pictrue cart_class" @click="licks('cart')">
				<BaseBadge v-if="cartNum > 0" class="uni-badge-left-margin" :text="cartNum" absolute="rightTop"></BaseBadge>
				<image src="@/static/imgs/cart.png"></image>
			</view>
			<button class="pictrue customerService-sty"  open-type='contact'>
				<image class="pictrue" src="@/static/imgs/wechat.png"></image>
			</button>
			<view class="pictrue phone_class" @click="licks('phone')" v-if="kefu_phone">
				<image src="@/static/imgs/phone.png"></image>
			</view>
		</view>

		<!-- #endif -->
	</view>
</template>

<script>
	import BaseBadge from '@/components/BaseBadge/index.vue';
	import {
		getCustomerType
	} from '@/api/api.js';
	import {
		getCartCounts
	} from '@/api/order.js';
	import {
		mapGetters
	} from "vuex";
	import {
			getCustomer
		} from '@/utils/index.js'
	export default {
		name: 'customerService',
		components:{
			BaseBadge
		},
		computed: mapGetters(['userInfo','cartNum','isLogin']),
		props: {
		},
		data() {
			return {
				topConfig: '70%',
				positions: 1,
				kefu_phone: ''
			};
		},
		created() {
			this.getCustomerType()
			if(this.isLogin)	this.getCartCounts()
		},
		mounted() {
			console.log(this.cartNum,"购物车数量");	
		},
		methods: {
			getCartCounts(){
				const params={sales_method:this.$Cache.get('sales_method')||1}
				getCartCounts(params).then((c)=>{
					this.$store.commit('indexData/setCartNum', c.data.count > 99 ? '..' : c.data.count);
				})
			},
			getCustomerType(){
				getCustomerType().then((res)=>{
					const data=res.data
					this.kefu_phone = data.customer_phone
				})
			},
			licks(type='phone'){
				if(type=='phone'){
					uni.makePhoneCall({
						phoneNumber:this.kefu_phone
					})
				
				}else if(type=='cart'){
					this.$util.JumpPath('/pages/order_addcart/order_addcart')
				}
			},
			setTouchMove(e) {
				var that = this;
				if (e.touches[0].clientY < 545 && e.touches[0].clientY > 66) {
					that.topConfig = e.touches[0].clientY+'px'
				}
			},
		}
	}
</script>

<style lang="scss">
  .custmer {
    touch-action: none;
  }
  .customerService{
	  position: relative;
	  .cart_class{
		  top: -110rpx;
	  }
	  .phone_class{
		  bottom: -200rpx;
	  }
  }
	.customerService,.customerService-sty {
		position: fixed;
		right: 20rpx;
		z-index: 40;
		&.on {
			left:20rpx;
		}
		.pictrue {
			position: absolute;
			right: 0;
			width: 86rpx;
			height: 86rpx;
			border-radius: 50%;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
	}
	.uni-badge-left-margin{
		position: absolute;
		/* #ifdef MP */
		right: 15rpx;
		top: -15rpx;
		/* #endif */
	}
	.customerService-sty{
		background-color: rgba(0,0,0,0) !important;
	}
</style>
